<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <style type="text/css">
            #allmap1 {width: 97%;height: 600px;overflow: hidden;margin:0;font-family:"微软雅黑";border: #3a8ee6 1px solid}
            .app-container{padding-left: 1.5%}
            .datatable td, th {
                padding: 12px 0;
                min-width: 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-overflow: ellipsis;
                vertical-align: middle;
                position: relative;
                text-align: left;
            }
            /*#dialog{*/
                /*width:100%;*/

            /*}*/
            #allmap2{width: 100%;height: 450px;overflow: hidden;margin:0;font-family:"微软雅黑";border: #3a8ee6 1px solid}

        </style>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0Ncr5cjFYodSpHwVuAkEykGBaSoZYWrL"></script>
        <!-- 引入样式 -->

        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <script>

    </script>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>首页<small>公司分布图</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>公司分布图</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <!--<div class="box" style="height: 900px">-->
                <button id="createMap" onclick="createMap()" style="display: none">隐藏按钮,用于调用原生方法</button>
                    <template>
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="分布图" name="first">
                                <div id="allmap1"></div>
                            </el-tab-pane>
                            <el-tab-pane label="详细信息" name="second">
                                <div class="filter-container">
                                    <el-input placeholder="公司地址" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                                    <el-button @click="findPage()" class="dalfBut">查询</el-button>
                                    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                                </div>
                                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                                    <el-table-column prop="address" label="公司地址" align="center"></el-table-column>
                                    <el-table-column prop="longitude" label="所在经度" align="center"></el-table-column>
                                    <el-table-column prop="latitude" label="所在纬度" align="center"></el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="pagination-container">
                                    <el-pagination
                                            class="pagiantion"
                                            @current-change="handleCurrentChange"
                                            :current-page="pagination.currentPage"
                                            :page-size="pagination.pageSize"
                                            layout="total, prev, pager, next, jumper"
                                            :total="pagination.total">
                                    </el-pagination>
                                </div>
                                <!-- 新增标签弹层 -->
                                <!--<div class="add-form">-->
                                    <el-dialog id="dialog" title="新增地址" :visible.sync="dialogFormVisible" width="70%" :before-close="handleClose">

                                        <div id="r-result">
                                            <el-input v-model="formData.address" id="suggestId" :placeholder="message"></el-input>
                                            <el-row id="row">
                                                <el-button type="primary" @click="handleAdd()">确定添加</el-button>
                                            </el-row>
                                            <input id="lng" type="hidden" />
                                            <input id="lat" type="hidden" />
                                        </div>
                                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                        <div id="allmap2" @click="mapClick()"></div>

                                    </el-dialog>

                                <!--</div>-->

                            </el-tab-pane>
                        </el-tabs>
                    </template>
                <!--</div>-->
            </div>
        </div>


    </body>
    <style type="text/css">
        .el-dialog__title {
            font-size: 25px
        }
        .tangram-suggestion {
            z-index:9999;
        }
        .el-dialog__body {
            padding:20px 20px ;
        }
        #suggestId{
            width: 500px;
            float: left;
        }
        #r-result{
            width: 100%;

        }
        #row{
            float: left;
            width:100px;
            margin-left: 10px;
        }
        .el-input{
            float: left;
            width:500px;
            margin-bottom: 10px;
        }

    </style>
     <!--引入组件库-->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>

        function createMap() {

            //分布图中的百度地图api
            var map1 = new BMap.Map("allmap1");    // 创建Map实例
            map1.centerAndZoom("武汉", 12);  // 初始化地图,设置中心点坐标和地图级别
            //添加地图类型控件
            map1.addControl(new BMap.MapTypeControl({
                mapTypes: [
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]
            }));
            map1.setCurrentCity("武汉");          // 设置地图显示的城市 此项是必须设置的
            map1.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            //----------------------------------------------------------------------------------------------
            //地图坐标点添加
            pagination = {//分页相关属性
                currentPage: 1,
                pageSize: 999999,
                queryString: null
            };
            axios.post("/address/findPage.do", pagination).then((res) => {
                if (res.data.flag) {
                    //解析Controller响应回的数据，为模型数据赋值
                    // alert(res.data.data.rows.address);
                    for (let list of res.data.data.rows) {
                        var address = list.address;//公司名称
                        var longitude = list.longitude;//公司经度
                        var latitude = list.latitude;//公司纬度
                        // alert(address+","+longitude+","+latitude)
                        var point = new BMap.Point(longitude, latitude);
                        map1.addOverlay(new BMap.Marker(point));
                        //添加文本标注
                        var opts = {
                            position: point,    // 指定文本标注所在的地理位置
                            offset: new BMap.Size(15, -25)    //设置文本偏移量
                        };
                        var label = new BMap.Label(address, opts);  // 创建文本标注对象
                        label.setStyle({
                            color: "red",
                            fontSize: "12px",
                            height: "20px",
                            lineHeight: "20px",
                            fontFamily: "微软雅黑"
                        });
                        map1.addOverlay(label);
                    }

                } else {
                    this.$message.error("获取地图分布点失败");
                }
            });
        }
        window.onload = function () {
          createMap();
        };




        var vue = new Vue({
            el: '#app',
            data:{
                activeName:'first',//添加/编辑窗口Tab标签名称
                pagination: {//分页相关属性
                    currentPage: 1,
                    pageSize:10,
                    total:0,
                    queryString:null
                },
                dataList: [],//列表数据
                formData: {
                    address:'',//公司地址名称
                    longitude:'',//公司经度
                    latitude:''//公司纬度
                },//表单数据
                dialogFormVisible: false,//控制添加窗口显示/隐藏
                message:'请输入地址搜索项',//新增窗口中的提示信息
            },
            created() {
                this.findPage();
            },

            methods: {
                //弹窗关闭前触发方法,用于避免弹窗关闭时搜索内容还留存
                handleClose(done) {
                    console.log("已触发");
                    try {
                        var x = document.getElementsByClassName("tangram-suggestion-main");
                        for (let i = 0; i < x.length; i++) {
                            x[i].innerHTML = "";
                        }
                    } catch (e) {
                    }
                    done();

                },
                handleClick(tab, event) {
                    // console.log(tab, event);
                    document.getElementById("createMap").click();

                },
                //地图点击添加事件
                mapClick() {
                    this.message="自选地点,请输入地址名称";
                },
                //添加
                handleAdd() {
                    this.formData.longitude = document.getElementById("lng").value;
                    this.formData.latitude = document.getElementById("lat").value;
                    this.formData.address=document.getElementById("suggestId").value;
                    // alert(this.formData.longitude+","+ this.formData.latitude+","+this.formData.input)
                    // alert(this.formData.address);
                    if (  this.formData.longitude=="" || this.formData.latitude==""){
                        this.$message.error("请选择地图位置后再进行提交");
                        return false;
                    }else if(this.formData.address=="" ){
                        this.$message.error("请填写公司地址再进行提交");
                        return false;
                    }
                    axios.post("/address/add.do",this.formData).then((res)=>{
                        if(res.data.flag){
                            this.$message.success(res.data.message);
                        }else {
                            this.$message.error(res.data.message);
                        }
                        this.findPage();
                        this.dialogFormVisible = false;
                    })
                },
                //分页查询
                findPage() {
                    axios.post("/address/findPage.do",this.pagination).then((res)=>{
                        if (res.data.flag){
                            //解析Controller响应回的数据，为模型数据赋值
                            this.pagination.total = res.data.data.total;
                            this.dataList = res.data.data.rows;

                        }else {
                            this.$message.error("获取页面列表失败");
                        }
                    });
                    // this.$nextTick(()=>{
                    //     document.getElementById("createMap").click();
                    // });
                },
                // 重置表单
                resetForm() {
                    this.message="请输入地址搜索项";
                    this.$nextTick(()=>{
                        document.getElementById("lng").value=null;
                        document.getElementById("lat").value=null;
                        document.getElementById("suggestId").value=null;
                    });

                },
                // 弹出添加窗口
                handleCreate() {
                    this.dialogFormVisible = true;
                    this.loadJScript();
                    this.resetForm();
                },

                //切换页码
                handleCurrentChange(currentPage) {
                    //为模型数据赋值（当前页面）
                    this.pagination.currentPage = currentPage;
                    this.findPage();
                },
                // 删除
                handleDelete(row) {
                    this.$confirm("你确定要删除["+row.address+"]吗？","提示",{//确认框
                        type:'warning'
                    }).then(()=>{
                        //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
                        axios.get("/address/delete.do?id=" + row.id).then((res) => {
                            if(res.data.flag){
                                //执行成功
                                //弹出成功提示信息
                                this.$message({
                                    type:'success',
                                    message:res.data.message
                                });
                                //重新进行分页查询
                                this.findPage();
                            }else{
                                //执行失败
                                this.$message.error(res.data.message);
                            }
                        }).catch((r)=>{
                            this.showMessage(r);
                        });
                    }).catch(()=>{
                        this.$message({
                            type:'info',
                            message:'操作已取消'
                        });
                    });
                },
                loadJScript() {
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "//api.map.baidu.com/api?v=2.0&ak=0Ncr5cjFYodSpHwVuAkEykGBaSoZYWrL&callback=init";
                    document.body.appendChild(script);
                }


            }
        });
        function init() {
            // 新增标签中的百度地图API功能
            function G(id) {
                return document.getElementById(id);
            }

            var map = new BMap.Map("allmap2",{enableMapClick:false});
            map.centerAndZoom("武汉",12);                   // 初始化地图,设置城市和地图级别。
            map.enableScrollWheelZoom(true);//添加地图缩放功能
            map.setDefaultCursor("pointer");   //设置地图默认的鼠标指针样式
            var ac = new BMap.Autocomplete({    //建立一个自动完成的对象
                "input" : "suggestId",
                "location" : map
            });
            //添加标注点功能
            function showInfo(e){
                //标注点的经纬度
                // alert(e.point.lng + ", " + e.point.lat);
                map.clearOverlays();
                var mak = new BMap.Marker(e.point);
                map.addOverlay(mak);
                // alert(G("lng"));
                G("lng").value=e.point.lng;
                G("lat").value = e.point.lat;
                //获取该点附近的poi地址名称
                new BMap.Geocoder().getLocation(e.point, function(rs){
                    // var addComp = rs.addressComponents;
                    // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                    // alert(rs.surroundingPois[0].title)
                    try {
                        G("suggestId").value = rs.surroundingPois[0].title;
                    }catch (e) {
                        G("suggestId").value = "未知地点,请修改地点名称";
                    }
                });

            }
            map.addEventListener("click", showInfo);//地图点击事件

            ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();

            });

            function setPlace(){
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun(){
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    var marker = new BMap.Marker(pp);
                    map.addOverlay(marker);    //添加标注
                    G("lng").value=pp.lng;
                    G("lat").value = pp.lat;
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);

            }

        }
    </script>

</html>
